<template>
  <div>
    <div class="chat-content" ref="scrollContainer">
      <!-- recordContent 聊天记录数组-->
      <div v-for="(itemc, indexc) in msgs" :key="indexc">
        <!-- 对方 -->
        <div class="word" v-if="!itemc.mineMsg">
          <img :src="itemc.headUrl" />
          <div class="info">
            <p class="time">
              {{ itemc.nickName }}
            </p>
            <div class="info-content">{{ itemc.contactText }}</div>
          </div>
        </div>
        <!-- 我的 -->
        <div class="word-my" v-else>
          <div class="info">
            <p class="time">
              {{ itemc.nickName }}
            </p>
            <div class="info-content">{{ itemc.contactText }}</div>
          </div>
          <img :src="itemc.headUrl" />
        </div>
      </div>
    </div>
    <!-- 输入区域 -->
    <div class="chatting-input">
      <a-space direction="vertical" class="input_witdh">
        <a-input-search
          v-model:value="value"
          placeholder="input search text"
          enter-button="Send"
          size="large"
          @search="onSearch"
        />
      </a-space>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUpdated, reactive, ref } from "vue";
export default defineComponent({
  setup() {
    let date = Date();
    let recordContent = [
      {
        mineMsg: "mineMsg",
        headUrl: "https://z1.ax1x.com/2023/10/10/pPznSSS.png",
        nickName: "nickName",
        timestamp: "timestamp",
        contactText: "contactText",
        date: "2023-20-23",
      },
      {
        headUrl: "https://z1.ax1x.com/2023/10/10/pPzn9yQ.png",
        nickName: "nickName",
        timestamp: "timestamp",
        contactText: "contactText111111111111111",
        date: "2023-20-24",
      },
    ];
    const msgs = reactive(recordContent);
    const value = ref<string>("");
    const onSearch = (searchValue: string) => {
      if (searchValue.trim()) {
        msgs.push({
          mineMsg: "mineMsg",
          headUrl: "https://z1.ax1x.com/2023/10/10/pPznSSS.png",
          nickName: "nickName",
          timestamp: "timestamp",
          contactText: searchValue,
          date: date,
        });
        console.dir(msgs);
        value.value = "";
      }
    };
    // 滚动条默认滑到底部
    const scrollContainer = ref(null) as any;
    onUpdated(() => {
      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
    });
    onMounted(() => {
      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
    });
    return {
      value,
      onSearch,
      scrollContainer,
      msgs,
    };
  },
});
</script>
<style lang="less" scoped>
.chat-content {
  width: 100%;
  padding: 20px;
  height: 78vh;
  overflow-y: scroll;
  .word {
    display: flex;
    margin-bottom: 20px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .info {
      margin-left: 10px;
      .time {
        font-size: 12px;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
        word-break: break-all;
      }
      .info-content {
        padding: 10px;
        font-size: 14px;
        background: #a3c3f6;
        position: relative;
        margin-top: 8px;
        width: 500px;
        word-break: normal;
        white-space: pre-wrap;
        word-wrap: break-word;
        // overflow: hidden;
      }
      //小三角形
      .info-content::before {
        position: absolute;
        left: -8px;
        top: 8px;
        content: "";
        border-right: 10px solid #a3c3f6;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }
  }

  .word-my {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .info {
      width: 90%;
      margin-left: 10px;
      text-align: right;
      .time {
        font-size: 12px;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
        margin-right: 10px;
      }
      .info-content {
        max-width: 70%;
        padding: 10px;
        font-size: 14px;
        float: right;
        margin-right: 10px;
        position: relative;
        margin-top: 8px;
        background: #a3c3f6;
        text-align: left;
      }
      //小三角形
      .info-content::after {
        position: absolute;
        right: -8px;
        top: 8px;
        content: "";
        border-left: 10px solid #a3c3f6;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }
  }
}
.chatting-input {
  position: absolute;
  padding: 10px;
  bottom: 2%;
  left: 50%;
  transform: translateX(-500px);
  width: 1000px;
  .input_witdh {
    width: 100%;
    .a-input-search {
      height: 40px;
    }
  }
}
</style>
